﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GalleryDetail.ascx.cs" Inherits="FreshCms.BackEnd.Controls.Module.Gallery.GalleryDetail" %>
<script src="/BackEnd/js/jquery.uploadify.js" type="text/javascript"></script>

<style>
    .uploadify{margin: 0px;float: none;display: inline-block;text-align: left;}
    .uploadify-queue {position: absolute;left: 10px;top: 0px;z-index: 1;background: #f39c12;border-radius: 5px;}
    .gallery-btn-delete{width: 25px;display: block;height: 21px;padding-top: 4px;padding-left: 8px;}
</style>

<div id="page-content" class="block">
    <div class="block-header"><a href="javascript:void(0)" class="header-title-link"><h1>Danh sách ảnh</h1></a></div>
    <div class="row gutter30">
        <div class="form-group text-center" style="position: relative;">
            <input id="file_upload" name="file_upload" type="file" multiple="true">
            <div class="btn-group dropup text-left" style="margin-top: -4px;margin-left: 13px;">
                <a href="javascript:void(0)" data-toggle="dropdown" class="btn btn-xs btn-default btn-danger dropdown-toggle"><i class="gi gi-remove_2"></i> Xóa ảnh đã chọn</a>
                <ul class="dropdown-menu dropdown-menu-delete">
                    <li><a href="javascript:void(0)" onclick="DeleteMultiData()" data-toggle="tooltip" data-original-title="Xóa ảnh Gallery" data-placement="right">Xác nhận</a></li>
                    <li><a href="javascript:void(0)">Hủy</a></li>
                </ul>
            </div>
            <a href="/BackEnd/?ui=12" type="button" id="btnBack" class="btn btn-sm btn-default ml10" style="margin-top: -2px;"><i class="hi hi-arrow-left"></i> Quay lại</a>
        </div>
        <div class="block">
            <div class="block-title"><h2><i class="fa fa-camera"></i>&nbsp;&nbsp;Gallery</h2></div>
            <div id="mess" style="display:none;"></div>
            <div id="gallery" class="gallery" data-toggle="lightbox-gallery">
                <div class="row" id="galeryContent">
                    <asp:Repeater ID="rpt" runat="server">
                        <ItemTemplate>
                            <div class="col-sm-2 gallery-image" rel="<%# Eval("GalleryId")%>">
                                <img src="<%# Eval("GalleryThumb")%>" alt="image" />
                                <div class="bg-overlay" onclick="BindClickGalerry(this)"></></div>
                                <div class="gallery-image-options text-center">
                                    <a href="<%# Eval("GalleryImg")%>" title="" class="gallery-link label label-info"><i class="fa fa-search-plus"></i></a>
                                    <div class="btn-group dropup text-left" style="">
                                        <a href="javascript:void(0)" class="label label-danger dropdown-toggle gallery-btn-delete" data-toggle="dropdown"><i class="fa fa-times"></i></a>
                                        <ul class="dropdown-menu dropdown-menu-delete">
                                            <li><a href="javascript:void(0)" onclick="DeleteData(<%# Eval("GalleryId")%>)" data-placement="right">Xác nhận</a></li>
                                            <li><a href="javascript:void(0)">Hủy</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                    
                    
                </div>
            </div>
        </div>
     </div>
</div>

<input type="hidden" id="errShowing" value="0"/>
<script>

    // Bind click active galerry
    function BindClickGalerry(me) {
        if ($(me).parent().hasClass('gallery-chosen')) { // neu da dc chose
            $(me).parent().removeClass('gallery-chosen');
        } else {
            $(me).parent().addClass('gallery-chosen');
        }
    }
    
    function DeleteMultiData() {
        var lstId;
        lstId = '';
        $("#gallery div.row div.gallery-image").each(function () {
            if ($(this).hasClass('gallery-chosen')) { // neu da dc chose
                lstId += $(this).attr('rel') + ',';
            }
        });
        if (lstId.length > 0) {
            console.log(lstId);
            // call ajax
            var param;
            param = {
                m: "deletemulti",
                ui : <%=panelId %>,
                lstid: lstId
            };
            $.ajax({
                url: "/BackEnd/Handler/Gallery.ashx",
                data: param,
                type: "POST",
                dataType: "json",
                beforeSend: function () {
                    jWaiting.callWaiting();
                },
                success: function (data) {
                    //console.log(data);
                    if (data.Success) {
                        jWaiting.callWaitingMessSuccess('Xóa những ảnh được chọn thành công...', 'reload', true);
                    }
                    else {
                        jWaiting.callWaitingMessError(data.Message);
                    }
                }
            });
        }else {
            showErrMess('mess', 'Bạn chưa chọn ảnh để xóa!');    
        }
    }
    
    // function delete Gallery
    function DeleteData(id) {
        // call ajax
        var param;
        param = {
            m: "delete",
            ui : <%=panelId %>,
            id: id
        };
        $.ajax({
            url: "/BackEnd/Handler/Gallery.ashx",
            data: param,
            type: "POST",
            dataType: "json",
            beforeSend: function () {
                jWaiting.callWaiting();
            },
            success: function (data) {
                //console.log(data);
                if (data.Success) {
                    jWaiting.callWaitingMessSuccess('Xóa ảnh thành công...', 'reload', true);
                }
                else {
                    jWaiting.callWaitingMessError(data.Message);
                }
            }
        });
    }
    
    // Uploadify
    $(function () {
        $('#file_upload').uploadify({
            'formData': {
                'timestamp': '',
                'token': ''
            },
            'fileTypeDesc': 'Image Files',
            'fileTypeExts': '*.gif; *.jpg; *.png',
            'multi': true,
            'buttonImage': '/BackEnd/img/browse-btn.png',
            'successTimeout': 300,
            'swf': '/BackEnd/js/uploadify.swf',
            'uploader': "/BackEnd/Handler/UploadImage.ashx?m=uploadgallery&type=<%=_cateType %>&id=<%=_id %>&ui=<%=panelId %>",
            'onUploadStart': function (file, data, response) {
                console.log('start');
            },
            'onQueueComplete': function (file, data, response) {
                $('#errShowing').val(0);
            },
            'onUploadSuccess': function (file, data, response) {
                //console.log(data);
                var obj = JSON.parse(data);
                if (obj.Success == true) {
                    var html;
                    html = '';
                    
                    html += '<div class="col-sm-2 gallery-image" rel="2">';
                    html += '    <img src="' + obj.ExtData + '" alt="image" /><div class="bg-overlay" onclick="BindClickGalerry(this)"></div>';
                    html += '    <div class="gallery-image-options text-center">';
                    html += '        <a href="' + obj.Data + '" title="" class="gallery-link label label-info"><i class="fa fa-search-plus"></i></a>';
                    html += '        <div class="btn-group dropup text-left" style="">';
                    html += '            <a href="javascript:void(0)" class="label label-danger dropdown-toggle gallery-btn-delete" data-toggle="dropdown"><i class="fa fa-times"></i></a>';
                    html += '            <ul class="dropdown-menu dropdown-menu-delete"><li><a href="javascript:void(0)" onclick="DeleteData(' + obj.Total + ')" data-placement="right">Xác nhận</a></li><li><a href="javascript:void(0)">Hủy</a></li></ul>';
                    html += '        </div>';
                    html += '    </div>';
                    html += '</div>';

                    $('#galeryContent').append(html);

                } else {
                    if ($('#errShowing').val() == 0) { // check neu chua show loi thi moi show ra, tranh show ra lien tuc do uploadifi multi file send nhieu lan
                        jWaiting.callWaitingMessError(obj.Message);
                        $('#errShowing').val(1);
                    }
                }
            }
        });
    });
    
</script>